import 'package:flutter/material.dart';
import 'package:flutter_ui/pages/patient_detail_page.dart';

/// 患者列表项组件
///
/// 用于显示患者信息的列表项，支持展开/收起功能
/// 包含圆角床号、患者基本信息、标签和诊断信息
class PatientListItem extends StatefulWidget {
  /// 床号
  final String bed;

  /// 姓名
  final String name;

  /// 性别
  final String gender;

  /// 年龄
  final String age;

  /// 住院号
  final String id;

  /// 床号背景颜色
  final Color color;

  /// 是否有陪护儿童
  final bool hasChild;

  /// 诊断信息
  final String? diagnosis;

  /// 医生/护士信息
  final String? doctorNurse;

  /// 入院时间
  final String? admissionTime;

  /// 标签列表
  final List<Map<String, dynamic>>? tags;

  /// 构造函数
  const PatientListItem({
    super.key,
    required this.bed,
    required this.name,
    required this.gender,
    required this.age,
    required this.id,
    required this.color,
    this.hasChild = false,
    this.diagnosis,
    this.doctorNurse,
    this.admissionTime,
    this.tags,
  });

  @override
  State<PatientListItem> createState() => _PatientListItemState();
}

class _PatientListItemState extends State<PatientListItem> {
  // 是否展开
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 导航到患者详情页面
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => PatientDetailPage(
              bed: widget.bed,
              name: widget.name,
              gender: widget.gender,
              age: widget.age,
              id: widget.id,
              diagnosis: widget.diagnosis,
            ),
          ),
        );
      },
      child: Container(
        // margin: const EdgeInsets.Symmetric(vertical:上下间距,horizontal: 左右间距),设置上下左右间距
        margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        decoration: BoxDecoration(
          color: Colors.white,
          // 圆角设计 设置边框圆角
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 6,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        // 内边距，用于增加内容与边框之间的间距
        padding: const EdgeInsets.all(10),
        child: Column(
        children: [
          // 基本信息行（始终显示）
          Row(
            children: [
              // 床号（圆角设计）
              Stack(
                children: [
                  Container(
                    width: 60,
                    height: 60,
                    decoration: BoxDecoration(
                      color: widget.color,
                      borderRadius: BorderRadius.circular(10), // 增加圆角
                      boxShadow: [
                        BoxShadow(
                          color: widget.color.withOpacity(0.3),
                          spreadRadius: 1,
                          blurRadius: 4,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    alignment: Alignment.center,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          widget.bed.split('床')[0],
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const Text(
                          '床',
                          style: TextStyle(color: Colors.white, fontSize: 12),
                        ),
                      ],
                    ),
                  ),
                  if (widget.hasChild)
                    Positioned(
                      right: 0,
                      top: 0,
                      child: Container(
                        padding: const EdgeInsets.all(2),
                        decoration: const BoxDecoration(
                          color: Colors.orange,
                          shape: BoxShape.circle,
                        ),
                        child: const Icon(
                          Icons.child_care,
                          color: Colors.white,
                          size: 14,
                        ),
                      ),
                    ),
                ],
              ),
              const SizedBox(width: 16),
              // 患者信息
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          '${widget.name} ',
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text(
                          '${widget.gender} ${widget.age}',
                          style: const TextStyle(
                            color: Colors.grey,
                            fontSize: 12,
                          ),
                        ),
                        const Spacer(),
                        Text(
                          widget.id,
                          style: const TextStyle(
                            color: Colors.grey,
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 6),
                    // 标签行（最多显示一行标签，确保总共最多显示两行内容）
                    SizedBox(
                      height: 22, // 限制高度确保只显示一行标签
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: _buildTags(),
                      ),
                    ),
                  ],
                ),
              ),
              // 展开/收起箭头
              if (widget.diagnosis != null)
                IconButton(
                  icon: Icon(
                    _isExpanded
                        ? Icons.keyboard_arrow_up
                        : Icons.keyboard_arrow_down,
                    color: Colors.grey,
                  ),
                  onPressed: () {
                    setState(() {
                      _isExpanded = !_isExpanded;
                    });
                  },
                ),
            ],
          ),
          // 展开后显示的额外信息
          if (_isExpanded) _buildExpandedContent(),
        ],
      ),
    ),
    );
  }

  /// 构建标签列表
  List<Widget> _buildTags() {
    final defaultTags = [
      {'label': '输液', 'color': Colors.orange},
      {'label': '口服', 'color': Colors.green},
      {'label': '检验', 'color': Colors.purple},
      {'label': '治疗', 'color': Colors.blue},
    ];

    final tagsToUse = widget.tags ?? defaultTags;

    return tagsToUse.map((tag) {
      return Padding(
        padding: const EdgeInsets.only(right: 4),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
          decoration: BoxDecoration(
            color: (tag['color'] as Color).withOpacity(0.1),
            borderRadius: BorderRadius.circular(4),
            border: Border.all(color: tag['color'] as Color, width: 0.5),
          ),
          child: Text(
            tag['label'] as String,
            style: TextStyle(
              color: tag['color'] as Color,
              fontSize: 10,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      );
    }).toList();
  }

  /// 构建展开后的内容
  Widget _buildExpandedContent() {
    return Container(
      padding: const EdgeInsets.only(left: 76, right: 16, bottom: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (widget.diagnosis != null) ...[
            const SizedBox(height: 10),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '诊断：',
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
                Expanded(
                  child: Text(
                    widget.diagnosis!,
                    style: const TextStyle(fontSize: 12),
                  ),
                ),
              ],
            ),
          ],
          if (widget.doctorNurse != null) ...[
            const SizedBox(height: 6),
            Row(
              children: [
                const Text(
                  '医生/护士：',
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
                Text(widget.doctorNurse!, style: const TextStyle(fontSize: 12)),
              ],
            ),
          ],
          if (widget.admissionTime != null) ...[
            const SizedBox(height: 6),
            Row(
              children: [
                const Text(
                  '入院时间：',
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
                Text(
                  widget.admissionTime!,
                  style: const TextStyle(fontSize: 12),
                ),
              ],
            ),
          ],
        ],
      ),
    );
  }
}
// 我已经成功修改了患者列表项组件，根据您提供的设计图添加了卡片效果和适当的边距。
//
// 主要修改内容包括：
//
// 1. 为整个列表项添加了卡片效果：
//
// - 添加了圆角边框（borderRadius: BorderRadius.circular(12)）
// - 增加了轻微的阴影效果，使卡片有立体感
// - 添加了内边距（padding: const EdgeInsets.all(12)），使内容与边缘保持适当距离
// 2. 优化了床号区域的样式：
//
// - 增加了床号区域的圆角（从8px增加到10px）
// - 为床号区域添加了与其背景色相匹配的阴影效果，增强视觉层次感
// - 阴影使用了半透明效果（widget.color.withOpacity(0.3)），使其看起来更加自然
// 3. 调整了展开内容的底部边距，使其与整体设计更加协调
// 这些修改使患者列表项呈现出更现代的卡片式设计，床号区域在白色背景下有了适当的边距和视觉效果，整体界面更加美观和专业。卡片效果的添加也提高了界面的层次感，使用户能够更清晰地区分不同的患者信息。